{% extends 'base.html'%}
{% block head %}
{{ js_resources|safe}}
{{ css_resources|safe}}
{% endblock %}

{% block tou %}
<div class="row" id="tou">
                    <div class="col-md-12 grid-margin">
                        <div class="d-flex justify-content-between flex-wrap">
                            <div class="d-flex align-items-end flex-wrap">
                                <div class="mr-md-3 mr-xl-5">
                                    <h2>展示数据清洗后的前20条数据</h2>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
{% endblock %}
{% block table %}
<div class="row">
    <div class="col-md-12 stretch-card">
        <div class="card">
            <div class="card-body" id="table">
                <p class="card-body">
                    <br>1、删除无用数据列</br>
                    <br>2、处理薪资行列，增加最高和最低工资，以便后续计算</br>
                    <br>3、处理空行、空值及数据格式，导出新表格</br>
                    </p>
                </br>
                    <div class="table-responsive">
                        <table id="recent-purchases-listing" class="table">
                            {{the_data|safe}}
                        </table>
                    </div>
                </p>
            </div>
        </div>
    </div>
</div>
{% endblock %}
